<template>
    <div class="center-top-echart-wrapper">
        <div class="map-bg" ref="mapBg"></div>
        <div class="map-bg-line" ref="mapBgLine"></div>
        <div class="map-nanhai" ref="mapNanhai"></div>
        <div class="map-wrapper"  ref="mapWrapper">
          <chinaMap ref="chinaMap" class="china-map" :params="params"></chinaMap>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import chinaMap from './mapChart'
export default {
  name: 'centrTopEchart',
  data() {
    return {
      chinaMapData: []
    }
  },
  props: ['params'],
  computed: {
      ...mapState(['dataSet'])
  },
  methods: {
    init() {
      let tl = new TimelineMax()
      let tw1 = TweenMax.to(this.$refs.mapBg, .2, {opacity: 1, scale: 1})
      let tw2 = TweenMax.to(this.$refs.mapBgLine, .2, {opacity: 1})
      let tw3 = TweenMax.to(this.$refs.mapWrapper, .2, {opacity: 1})
      let tw4 = TweenMax.to(this.$refs.mapNanhai, .2, {opacity: 1})
      tl.addLabel('start')
        .add(tw1, 'start+=0.2')
        .add(tw2, 'start+=0.3')
        .add(tw3, 'start+=0.3')
        .add(tw4, 'start+=0.3')
        .add(this.$refs.chinaMap.init, 'start+=0.3')
      return tl
    }
  },
  components: {
      chinaMap
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/_lib-variable';
.center-top-echart-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.china-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.map-bg {
  position: absolute;
  top: -106px;
  left: -307px;
  width: 1496px;
  height: 1080px;
  background: url('../../assets/imgs/center/map-bg1.png') no-repeat;
  opacity: 0;
  transform: scale(0);
  z-index:-1;
  pointer-events: none;
}
.map-bg-line {
  position: absolute;
  top: -107px;
  left: -235px;
  width: 1400px;
  height: 912px;
  // background: url('../../assets/imgs/center/map-bg-line1.png') no-repeat;
  background-size:100% 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.map-wrapper {
  opacity: 0;
}
.map-nanhai {
  position: absolute;
  bottom: -76px;
  right: 78px;
  width: 112px;
  height: 152px;
  background: url('../../assets/imgs/center/nanhai1.png') no-repeat;
  transform: scale(.9);
  z-index: 1;
  opacity: 0;
}
</style>
